<template>
  <el-card class="content-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span
          >{{ detail?.categoryName || "类别" }} -
          {{ detail?.methodName || "方法" }}</span
        >
        <el-icon class="edit-icon" @click="openEditDialog">
          <Edit />
        </el-icon>
      </div>
    </template>

    <div class="content-container">
      <div class="api-content">
        <div class="section" id="basic-info">
          <div class="section-header"><h2>基本信息</h2></div>

          <el-descriptions :column="1" border>
            <el-descriptions-item label="SDK大类">{{
              detail.sdkCategory
            }}</el-descriptions-item>
            <el-descriptions-item label="大类名称">{{
              detail.categoryName
            }}</el-descriptions-item>
            <el-descriptions-item label="方法">{{
              detail.method
            }}</el-descriptions-item>
            <el-descriptions-item label="方法名">{{
              detail.methodName
            }}</el-descriptions-item>
            <el-descriptions-item label="功能简介">{{
              detail.description
            }}</el-descriptions-item>
            <el-descriptions-item label="注意事项">{{
              detail.notes
            }}</el-descriptions-item>
            <el-descriptions-item label="返回格式">{{
              detail.returnFormat
            }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="section" id="call-example">
          <div class="section-header">
            <h2>调用示例</h2>
            <el-button
              type="primary"
              size="small"
              :icon="CopyDocument"
              @click="copyCode(detail.callExample)"
              class="copy-btn"
            >
              复制代码
            </el-button>
          </div>
          <MonacoEditor
            style="height: 200px; border-radius: 6px; overflow: hidden"
            v-model="detail.callExample"
            language="javascript"
            :options="{
              readOnly: true,
              minimap: { enabled: false },
              height: '200px',
            }"
          />
        </div>

        <div class="section" id="return-example">
          <div class="section-header">
            <h2>返回示例</h2>
            <el-button
              type="primary"
              size="small"
              :icon="CopyDocument"
              @click="copyCode(detail.returnExample)"
              class="copy-btn"
            >
              复制代码
            </el-button>
          </div>
          <MonacoEditor
            style="height: 200px; border-radius: 6px; overflow: hidden"
            v-model="detail.returnExample"
            language="javascript"
            :options="{
              readOnly: true,
              minimap: { enabled: false },
              height: '200px',
            }"
          />
        </div>

        <div class="section" id="params-list" v-if="detail.params?.length">
          <div class="section-header"><h2>参数列表</h2></div>
          <el-table :data="detail.params" border stripe>
            <el-table-column prop="paramName" label="参数名" />
            <el-table-column prop="paramType" label="参数类型" />
            <el-table-column prop="isRequired" label="是否必填">
              <template #default="{ row }">
                <el-tag :type="row.isRequired ? 'danger' : 'info'">{{
                  row.isRequired ? "必填" : "选填"
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="paramExample" label="参数示例" />
            <el-table-column
              prop="paramDesc"
              label="参数描述"
              show-overflow-tooltip
            />
          </el-table>
        </div>

        <div class="section" id="enums-list" v-if="detail.enums?.length">
          <div class="section-header"><h2>枚举值列表</h2></div>
          <el-table :data="detail.enums" border stripe>
            <el-table-column prop="key" label="枚举键" />
            <el-table-column prop="value" label="枚举值" />
            <el-table-column prop="category" label="分类" />
            <el-table-column prop="referenceImage" label="参考图">
              <template #default="{ row }">
                <el-image
                  v-if="row.referenceImage"
                  :src="row.referenceImage"
                  :preview-src-list="[row.referenceImage]"
                  fit="contain"
                  style="width: 50px; height: 50px"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="section" id="file-tokens" v-if="detail.fileTokens?.length">
          <h2>案例展示</h2>
          <el-collapse>
            <el-collapse-item
              v-for="(token, index) in detail.fileTokens"
              :key="index"
              :title="token.title || `案例 ${index + 1}`"
            >
              <div class="file-token-content">
                <MonacoEditor
                  v-model="token.content"
                  :language="token.language || 'javascript'"
                  :options="{
                    readOnly: true,
                    minimap: { enabled: false },
                    height: '200px',
                  }"
                />
                <p v-if="token.description" class="token-description">
                  {{ token.description }}
                </p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <!-- 右侧悬浮目录 -->
      <div class="toc">
        <div class="toc-title">目录</div>
        <div class="toc-item" @click="scrollToSection('basic-info')">
          基本信息
        </div>
        <div class="toc-item" @click="scrollToSection('call-example')">
          调用示例
        </div>
        <div class="toc-item" @click="scrollToSection('return-example')">
          返回示例
        </div>
        <div
          class="toc-item"
          v-if="detail.params?.length"
          @click="scrollToSection('params-list')"
        >
          参数列表
        </div>
        <div
          class="toc-item"
          v-if="detail.enums?.length"
          @click="scrollToSection('enums-list')"
        >
          枚举值列表
        </div>
        <div
          class="toc-item"
          v-if="detail.fileTokens?.length"
          @click="scrollToSection('file-tokens')"
        >
          案例展示
        </div>
      </div>
    </div>
  </el-card>

  <!-- 编辑弹窗 -->
  <EditDialog ref="editDialogRef" :sdk-options="sdkOptions" @success="handleEditSuccess" />
</template>

<script setup>
import { defineProps, ref } from "vue";
import { ElMessage } from "element-plus";
import { CopyDocument, Edit } from "@element-plus/icons-vue";
import MonacoEditor from "@/components/MonacoEditor.vue";
import EditDialog from "./edit.vue";

const props = defineProps({
  detail: {
    type: Object,
    default: () => null,
  },
  sdkOptions: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['refresh-detail', 'refresh-sdk-list']);

const editDialogRef = ref();

const openEditDialog = () => {
  editDialogRef.value?.open(props.detail);
};

const handleEditSuccess = (updatedData) => {
  // 触发父组件刷新详情数据和SDK列表
  emit('refresh-detail', updatedData);
  emit('refresh-sdk-list');
};

const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};

const copyCode = async (code) => {
  if (!code) {
    ElMessage.warning("没有可复制的代码");
    return;
  }

  try {
    await navigator.clipboard.writeText(code);
    ElMessage.success("代码已复制到剪贴板");
  } catch (err) {
    // 降级方案：使用传统的复制方法
    const textArea = document.createElement("textarea");
    textArea.value = code;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand("copy");
      ElMessage.success("代码已复制到剪贴板");
    } catch (fallbackErr) {
      ElMessage.error("复制失败，请手动复制");
    }
    document.body.removeChild(textArea);
  }
};
</script>

<style scoped>
.content-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.card-header {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;

  font-weight: 500;
  color: #303133;
  /* background: #f8f9fa; */
  /* border-bottom: 1px solid #e4e7ed; */
}

.edit-icon {
  font-size: 18px;
  color: #409eff;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px;
  border-radius: 4px;
}

.edit-icon:hover {
  color: #337ecc;
  background-color: rgba(64, 158, 255, 0.1);
  transform: scale(1.1);
}

:deep(.el-card__body) {
  padding: 0;
  height: calc(100% - 60px);
  overflow-y: auto;
  background: #ffffff;
}

.content-container {
  min-height: 100%;
  padding: 30px;
  padding-right: 280px;
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.api-content {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.8;
  color: #4a5568;
}

.section {
  margin-bottom: 40px;
  padding: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  flex: 1;
}

.section h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 50px;
  height: 2px;
  background: #409eff;
  border-radius: 1px;
}

.copy-btn {
  margin-left: 16px;
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 12px;
  background: #409eff;
  border-color: #409eff;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  background: #337ecc;
  border-color: #337ecc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 右侧悬浮目录样式 */
.toc {
  position: fixed;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border: 1px solid #e4e7ed;
  min-width: 200px;
}

.toc-title {
  font-weight: 700;
  margin-bottom: 15px;
  color: #2d3748;
  font-size: 18px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}

.toc-item {
  padding: 12px 16px;
  cursor: pointer;
  color: #4a5568;
  transition: all 0.3s ease;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
  position: relative;
}

.toc-item:hover {
  color: #409eff;
  background: #ecf5ff;
  border-left-color: #409eff;
  transform: translateX(4px);
}

.toc-item:active {
  transform: translateX(2px);
}

.file-token-content {
  margin: 15px 0;
  border-radius: 8px;
  overflow: hidden;
}

.token-description {
  margin-top: 15px;
  color: #4a5568;
  font-size: 14px;
  line-height: 1.6;
  padding: 15px;
  background: #f7fafc;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

/* Element Plus 组件样式优化 */
:deep(.el-descriptions) {
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #ebeef5;
}

:deep(.el-descriptions__label) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  font-weight: 600;
  color: #495057;
  width: 200px;
  min-width: 200px;
}

:deep(.el-descriptions__content) {
  background: #ffffff;
  color: #6c757d;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

:deep(.el-table th) {
  background: #409eff;
  color: white;
  font-weight: 600;
  border: none;
}

:deep(.el-table td) {
  border-color: #e2e8f0;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #f8f9fa;
}

:deep(.el-collapse) {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  color: #2d3748;
  font-weight: 600;
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
  padding: 15px 20px;
}

:deep(.el-collapse-item__content) {
  padding: 20px;
  background: #ffffff;
  border-radius: 0;
}

:deep(.el-tag) {
  border-radius: 20px;
  font-weight: 500;
  padding: 4px 12px;
}

:deep(.el-image) {
  border-radius: 6px;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

:deep(.el-image:hover) {
  border-color: #409eff;
  transform: scale(1.05);
}

/* Monaco Editor 样式优化 */
:deep(.monaco-editor) {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .content-container {
    padding-right: 30px;
  }

  .toc {
    display: none;
  }
}

@media (max-width: 768px) {
  .content-container {
    padding: 20px 15px;
  }

  .section {
    padding: 20px 15px;
    margin-bottom: 25px;
  }

  .section h2 {
    font-size: 18px;
  }

  .card-header {
    font-size: 16px;
    padding: 15px;
  }
}

/* 滚动条样式 */
:deep(.el-card__body)::-webkit-scrollbar {
  width: 6px;
}

:deep(.el-card__body)::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

:deep(.el-card__body)::-webkit-scrollbar-thumb {
  background: #409eff;
  border-radius: 3px;
}

:deep(.el-card__body)::-webkit-scrollbar-thumb:hover {
  background: #337ecc;
}
</style>
